/**
 * Created by huotaol on 2017/5/12.
 */
import React, {Component} from "react";
import {StyleSheet, Text, View} from "react-native";
import {connect} from "react-redux";
import CustomStyle from "../../../common/style/CustomStyle";
import Button from "../../components/Button";
import * as BuyCarAction from "../../redux/action/BuyCar";
import {refreshBuyCarFilter} from "./BuyCar";
import {Actions} from "react-native-router-flux";
import GridView from "../../../common/component/GridView";
import {goToPage} from "../../main/MainUI";
import SearchHeader from "./component/SearchHeader";

class SearchByKeyword extends Component {

    // 构造
    constructor(props) {
        super(props);
        const data = ['奔驰', '宝马', '奥迪', '丰田', '本田', '标致'];
        // 初始状态
        this.state = {hotList: data, keyword: ','};
        this._search = this._search.bind(this);
        this.renderItem = this.renderItem.bind(this);
    }

    render() {
        return (
            <View style={{flex: 1, backgroundColor: '#FFFCEE'}}>
                <SearchHeader titleHolder={'请输入要查询的品牌/车系/型号'} confirm={(value) => {
                    this._search(value);
                }}/>
                <View style={{
                    marginTop: CustomStyle.getActualSizeInVertical(20),
                    paddingTop: CustomStyle.getActualSizeInVertical(30),
                    backgroundColor: 'white',
                    paddingBottom: CustomStyle.getActualSizeInVertical(20),
                }}>
                    <Text
                        style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(30),
                            color: '#4a3d18',
                            paddingLeft: CustomStyle.getActualSizeInHorizontal(34),
                        }]}>热门品牌</Text>
                    <GridView
                        items={this.state.hotList}
                        itemsPerRow={3}
                        renderItem={this.renderItem}/>
                </View>

            </View>

        );
    }

    renderItem(item) {
        return (
            <View style={[styles.itemContainer]}>
                <Button
                    containerStyle={[
                        styles.item,
                    ]}
                    style={[
                        CustomStyle.baseText,
                        styles.itemText,
                    ]}
                    text={item}
                    onPress={() => {
                        this._search(item)
                    }}
                />
            </View>
        );
    }

    _search(text) {
        this.props.updateFilter({keyword: text, brand: '', series: ''});
        refreshBuyCarFilter();
        Actions.pop();
        goToPage(1);
    }

}


const styles = StyleSheet.create({

    contentViewStyle: {
        // 主轴方向
        flexDirection: 'row',
        // 换行
        flexWrap: 'wrap'
    },

    itemContainer: {
        height: CustomStyle.getActualSizeInVertical(108),
        width: CustomStyle.screenWidth / 3,
        justifyContent: 'center',
        alignItems: 'center',
    },
    item: {
        height: CustomStyle.getActualSizeInVertical(68),
        width: CustomStyle.getActualSizeInHorizontal(180),
        borderRadius: CustomStyle.getActualSizeInHorizontal(4),
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 1,
        borderColor: '#ede9dd',
    },
    itemText: {
        fontSize: CustomStyle.getActualFontSize(30),
        color: '#b2a682',
    },
});

const mapStateToProps = (state) => {
    return {};
};

const mapDispatchToProps = (dispatch) => {
    return {
        updateFilter: param => dispatch(BuyCarAction.buyCarFilter(param)),
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(SearchByKeyword);
